<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button" replace active-class = "active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class = "active">关于</router-link> -->
    <!-- <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link> -->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>

<!-- 下面是测试 Vuex 的 -->
    <h1>=======App数据=======</h1>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">++</button>  
    <button @click="subtraction">--</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>

    <h2>====App数据：getters相关信息====</h2>
    <h2>{{$store.getters.powerCounter}}</h2>

    <h2>====App数据：info对象的内容是否是响应式的====</h2>
    <h2>{{$store.state.info}}</h2>
    <button @click="updateInfo">修改信息</button>

    <h2>====App数据：modules中的内容====</h2>
    <h2>{{$store.state.a.name}}</h2>
    <h2>{{$store.state.b.name}}</h2>
    <button @click="updateName()">修改名字</button>
    <h2>{{$store.getters.fullname}}</h2>
    <h2>{{$store.getters.fullname2}}</h2>
    <h2>{{$store.getters.fullname3}}</h2>
    <button @click="asyncUpdateName">异步修改名字</button>

    <h1>=======HelloVuex数据=======</h1>
    <hello-vuex/>

  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
  name: 'App',
  components: {
    HelloVuex
  },
  methods: {
    homeClick() {
      console.log('homeClick');
      // 通过代码的方式修改路由  vue-router
      // this.$router.push('/home')
      // this.$router.replace("/home")
      this.$router.replace("/home").catch(err => {})  
    },
    aboutClick() {
      console.log('aboutClick');
      // this.$router.push('/about')
      // this.$router.replace("/about")
      this.$router.replace("/about").catch(err => {})
      //  .catch(err => {})  解决点击两次控制台报错的问题
    },

    // 测试一下 Vuex
    addition() {
        this.$store.commit('increment')
    },
    subtraction() {
        this.$store.commit('decrement')
    },
    addCount(count) {
      // payload: 负载
      // this.$store.commit('incrementCount', count)
      this.$store.commit({
        type: 'incrementCount', 
        count
      })
    },
    updateInfo () {
      // this.$store.commit('updateInfo')
      // this.$store.dispatch('aUpdateInfo', {
      //   message: '我是携带的信息',
      //   success: () => {
      //     console.log("里面已经完成了");
      //   }
      // })
      this.$store
        .dispatch('aUpdateInfo', '我是携带的信息')
        .then(res => {
          console.log('里面完成了提交');
          console.log(res);
        })
    },
    updateName() {
      this.$store.commit('updateName', 'lisi2')
    },
    asyncUpdateName() {
      this.$store.dispatch('aUpdateName')
    }
  }
}
</script>

<style>
    /* .router-link-active {
      color: #f00;
    } */
    .active {
      color: #f00;
    }
</style>
